<template>
<div class="wrapper">
  <div class="search" >
    <i @click="goBack" class="fa fa-angle-left "></i>
    <div class="search-box">
      <input type="text" v-model="nameToSearch" placeholder="搜索饿了么商家" @input="inputChange">
    </div>
    <p @click="clickSearch">搜索</p>
  </div>
  <ul class="business">
    <li v-for="item in businessArr" @click="toSearchList(item)">
      <div class="left">
        <i class="fa fa-search"></i>
        <p>{{item.businessName}}</p>
      </div>
      <div class="right">
        <i class="fa fa-angle-right"></i>
      </div>
    </li>
  </ul>
  <Footer></Footer>
</div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  name: "Search",
  data(){
    return{
      nameToSearch:'',
      businessArr:[],
      timeout:null

    }
  },
  components: {Footer},
  methods:{
    //回退事件
    goBack(){
      this.$router.go(-1);
    },
    //防抖
    debounce (func, wait) {
      //开始清除计时器
      if (this.timeout) clearTimeout(this.timeout)
      //wait个时间后执行func函数
      this.timeout = setTimeout(() => {
        func()
      }, wait)
    },
    // input 实时输入
    inputChange () {
      //@input原本为修改即触发，用debounce函数实现修改后过特定时间触发
      this.debounce(this.SearchBusiness, 2000)
    },
    //需要触发的搜索功能
    SearchBusiness() {
      //TODO
      if(this.nameToSearch!='') {
        this.$axios.get('listBusinessByVagueName', {
          params: {
            nameToSearch: this.nameToSearch
          }
        }).then(response => {
          this.businessArr = response.data;
          //判断是否登录
        }).catch(error => {
          console.error(error);
        });
      }
    },
    //点击单个商家跳转
    toSearchList(businessExactly){
      this.$router.push({path:'/searchList',query:{nameToSearch:businessExactly.businessName}});
    },
    //点击搜索跳转
    allToSearchList(){
      this.$router.push({path:'/searchList',query:{nameToSearch:this.nameToSearch}});
    },
    clickSearch(){
      //点击“搜索”按钮的时候直接搜索并跳转
      this.SearchBusiness();
      this.allToSearchList();
      }
    }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper{
  width: 100%;
  height: 100%;
}
/**************************搜索**************************/
.wrapper .search{
  width: 100%;
  height: 17vw;
  background-color: #e4f8fa;

  display: flex;
  align-items: center;
}

.wrapper .search .fa-angle-left{
  flex:0 0 6vw;
  margin-left: 4vw;
  font-size: 6vw;
}

.wrapper .search .search-box{
  flex: 1;
}

.wrapper .search .search-box input{
  border: solid 1px #DDD;
  border-radius: 6px;

  width:100%;
  height: 6vw;
  font-size: 3.2vw;
  font-family: "宋体";
  color: #AEAEAE;
}

input::placeholder{
  color:#AEAEAE;
}

.wrapper .search  p{
  flex:0 0 13vw;
  font-size: 4vw;
  font-weight: 600;
  color: #635a5a;
  font-family: "微软雅黑";

  margin-left: 5vw;
}
/**************************商家名称列表**************************/
.wrapper .business{
  width: 100%;
}

.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding:2.8vw 4vw;
  user-select: none;


  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .business li .left{
  display: flex;
  align-items: center;
}

.wrapper .business li .left .fa-search{
  font-size: 3.3vw;
  margin-right: 2.5vw;
}

.wrapper .business li .left p{
  font-size: 4vw;
}

.wrapper .business li .right{
  display: flex;
  align-items: center;
}

.wrapper .business li .right .fa-angle-right{
  font-size: 6.5vw;
}
</style>